<template>
  <div class="table-container">
    <table border="1px" width="800px">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>电话</th>
        <th>地址</th>
      </tr>
      <tr v-for="stu in students" :key="stu.id">
        <td>{{ stu.id }}</td>
        <td>{{ stu.name }}</td>
        <td>{{ stu.age }}</td>
        <td>{{ stu.gender }}</td>
        <td>{{ stu.cellphone }}</td>
        <td>{{ stu.address }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "StudentView",
  data() {
    return {
      students: []
    };
  },
  methods: {
    loadStudents() {
      // 通过axios调用后台数据
      axios.get('http://localhost:8080/findStudents')
          .then(result => {
            console.log(result.data);
            if (result.data.status === 200) {
              this.students = result.data.data;
            }
          });
    }
  },
  mounted() {
    this.loadStudents();
  }
};
</script>

<style scoped>
.table-container {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* 可选：添加一些顶部间距 */
}
table {
  border-collapse: collapse;
  width: 800px;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
</style>
